<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
            <el-form-item label="钢种" style="margin-left:10px !important">
              <el-input
                v-model="headerSearchForm.variableName"
                placeholder="请输入"
                style="width:180px;margin:0"
              />
            </el-form-item>
            <el-form-item label="卷号" style="margin-left:10px !important">
              <el-input
                v-model="headerSearchForm.variableName"
                placeholder="请输入"
                style="width:180px"
              />
            </el-form-item>
          </el-form>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="table-container-main" style="height:44vh">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="serialNumber" label="序号" fixed="left" width="40px">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="coilNumber" label="卷号" />
            <el-table-column prop="coilGrade" label="钢种" />
            <el-table-column prop="planTime" label="屈服强度" />
            <el-table-column label="单位张力实际值" header-align="center">
              <el-table-column prop="ZS1" label="1#单位张力" />
              <el-table-column prop="ZS2" label="2#单位张力" />
              <el-table-column prop="ZS3" label="3#单位张力" />
              <el-table-column prop="ZS4" label="4#单位张力" />
              <el-table-column prop="ZS5" label="5#单位张力" />
            </el-table-column>
            <el-table-column label="单位张力推荐值" header-align="center">
              <el-table-column prop="ZHS1" label="1#单位张力" />
              <el-table-column prop="ZHS2" label="2#单位张力" />
              <el-table-column prop="ZHS3" label="3#单位张力" />
              <el-table-column prop="ZHS4" label="4#单位张力" />
              <el-table-column prop="ZHS5" label="5#单位张力" />
            </el-table-column>

            <el-table-column label="张力设定值" header-align="center">
              <el-table-column prop="ZHS1" label="1#张力" />
              <el-table-column prop="ZHS2" label="2#张力" />
              <el-table-column prop="ZHS3" label="3#张力" />
              <el-table-column prop="ZHS4" label="4#张力" />
              <el-table-column prop="ZHS5" label="5#张力" />
            </el-table-column>
            <el-table-column label="张力推荐值" header-align="center">
              <el-table-column prop="ZHS1" label="1#张力" />
              <el-table-column prop="ZHS2" label="2#张力" />
              <el-table-column prop="ZHS3" label="3#张力" />
              <el-table-column prop="ZHS4" label="4#张力" />
              <el-table-column prop="ZHS5" label="5#张力" />
            </el-table-column>
            <el-table-column label="厚度实际值" header-align="center">
              <el-table-column prop="ZHS1" label="1#厚度" />
              <el-table-column prop="ZHS2" label="2#厚度" />
              <el-table-column prop="ZHS3" label="3#厚度" />
              <el-table-column prop="ZHS4" label="4#厚度" />
            </el-table-column>
            <el-table-column label="厚度推荐值" header-align="center">
              <el-table-column prop="ZHS1" label="1#厚度" />
              <el-table-column prop="ZHS2" label="2#厚度" />
              <el-table-column prop="ZHS3" label="3#厚度" />
              <el-table-column prop="ZHS4" label="4#厚度" />
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="90">
              <template #default="scope">
                <!-- <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
                <el-button type="warning" @click="handleCheck(scope.row)">详情</el-button>
                <!-- <el-button type="primary" @click="handleQuote(scope.row)">引用</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>-->
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="12">
            <div style="height:250px;width:550px;">
              <nercar-echarts
                :graphic="echartsListOptions[0].graphic"
                :title="echartsListOptions[0].title"
                :grid="echartsListOptions[0].grid"
                :x-axis="echartsListOptions[0].xAxis"
                :y-axis="echartsListOptions[0].yAxis"
                :tooltip="echartsListOptions[0].tooltip"
                :series="echartsListOptions[0].series"
                :legend="echartsListOptions[0].legend"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <div style="height:250px;width:550px;">
              <nercar-echarts
                :graphic="echartsListOptions[1].graphic"
                :title="echartsListOptions[1].title"
                :grid="echartsListOptions[1].grid"
                :x-axis="echartsListOptions[1].xAxis"
                :y-axis="echartsListOptions[1].yAxis"
                :tooltip="echartsListOptions[1].tooltip"
                :series="echartsListOptions[1].series"
                :legend="echartsListOptions[1].legend"
              />
            </div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
    <el-dialog
      v-model="dialogVisible"
      title="模型计算"
      style="text-align: left;width: 80%;height:90%;--el-dialog-title-font-size: 16px;margin-top:30px"
    >
      <el-row>
        <el-col style="font-size:12px">
          <div class="msg-title">基本信息</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;margin-left:15px">
        <el-col :span="4" style="font-size:12px">
          <div>
            <span>卷号</span>
            <el-input
              v-model="headerSearchForm.productionLine"
              placeholder="请输入"
              style="width:120px;height:20px;margin-left:4px;"
            />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>钢种</span>
            <el-input
              v-model="headerSearchForm.productionLine"
              placeholder="请输入"
              style="width:120px;height:20px;margin-left:4px"
            />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>屈服强度</span>
            <el-input
              v-model="headerSearchForm.productionLine"
              placeholder="请输入"
              style="width:120px;height:20px;margin-left:4px"
            />
          </div>
        </el-col>
        <el-col :span="4" style="font-size:12px;margin-left:10px">
          <div>
            <span>出宽</span>
            <el-input
              v-model="headerSearchForm.productionLine"
              placeholder="请输入"
              style="width:120px;height:20px;margin-left:4px"
            />
          </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;margin-left:10px">
          <div>
            <span>出厚</span>
            <el-input
              v-model="headerSearchForm.productionLine"
              placeholder="请输入"
              style="width:100px;height:20px;margin-left:4px"
            />
          </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;margin-left:10px">
          <div>
            <span>入厚</span>
            <el-input
              v-model="headerSearchForm.productionLine"
              placeholder="请输入"
              style="width:100px;height:20px;margin-left:4px"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="font-size:12px">
          <div class="msg-title">轧制规程参数</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;margin-left:15px">
        <el-col style="font-size:12px;">
          <el-table
            :data="rollingProcedureTable"
            style="width: 100%"
            :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }"
            :cell-style="{fontSize:'12px'}"
          >
            <el-table-column prop="ITEM" label="ITEM" />
            <el-table-column prop="UNIT" label="单位" />
            <el-table-column prop="S1" label="STD1" />
            <el-table-column prop="S2" label="STD2" />
            <el-table-column prop="S3" label="STD3" />
            <el-table-column prop="S4" label="STD4" />
            <el-table-column prop="S5" label="STD5" />
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="font-size:12px">
          <div class="msg-title">仿真结果输出</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;margin-left:15px">
        <el-col style="font-size:12px;">
          <el-table
            :data="simulationResultOutTable"
            style="width: 100%"
            :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }"
            :cell-style="{fontSize:'12px'}"
          >
            <el-table-column prop="ITEM" label="ITEM" />
            <el-table-column prop="UNIT" label="单位" />
            <el-table-column prop="BEFORE" label="BEFORE" />
            <el-table-column prop="STD1" label="STD1" />
            <el-table-column prop="STD2" label="STD2" />
            <el-table-column prop="STD3" label="STD3" />
            <el-table-column prop="STD4" label="STD4" />
            <el-table-column prop="STD5" label="STD5" />
          </el-table>
        </el-col>
      </el-row>

      <el-row style="margin-top:10px;margin-left:15px">
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts
              :title="option.title"
              :series="option.series"
              :legend="option.legend"
              :graphic="option.graphic"
              :tooltip="option.tooltip"
              :x-axis="option.xAxis"
              :y-axis="option.yAxis"
              :grid="option.grid"
              style="position:absolute;width:260px;height:240px !important;top:-30px"
            />
          </div>
        </el-col>
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts
              :title="option1.title"
              :series="option1.series"
              :legend="option1.legend"
              :graphic="option1.graphic"
              :tooltip="option1.tooltip"
              :x-axis="option1.xAxis"
              :y-axis="option1.yAxis"
              :grid="option1.grid"
              style="position:absolute;width:260px;height:240px !important;top:-30px"
            />
          </div>
        </el-col>
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts
              :title="option2.title"
              :series="option2.series"
              :legend="option2.legend"
              :graphic="option2.graphic"
              :tooltip="option2.tooltip"
              :x-axis="option2.xAxis"
              :y-axis="option2.yAxis"
              :grid="option2.grid"
              style="position:absolute;width:260px;height:240px !important;top:-30px"
            />
          </div>
        </el-col>
        <el-col style="font-size:12px;" :span="6">
          <div style="height: 160px;width:450px;">
            <nercar-echarts
              :title="option3.title"
              :series="option3.series"
              :legend="option3.legend"
              :graphic="option3.graphic"
              :tooltip="option3.tooltip"
              :x-axis="option3.xAxis"
              :y-axis="option3.yAxis"
              :grid="option3.grid"
              style="position:absolute;width:260px;height:240px !important;top:-30px"
            />
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import {
  ref,
  reactive,
  computed,
  onMounted,
  onUnmounted,
  nextTick,
  defineComponent
} from "vue";
import { ElMessage } from "element-plus";
import NercarEcharts from "/@/components/NercarEcharts/NercarEcharts.vue";
import * as echarts from "echarts";
import "/@/views/RollingSimulation/rollingSimulationModelCommonStyle.less";

interface SearchForm {
  productionLine: string;
  variableDescription: string;
  variableName: string;
  start: string;
  end: string;
}

export default defineComponent({
  name: "DataDictionary",
  setup() {
    // 表单数据
    const headerSearchForm = reactive<SearchForm>({
      productionLine: "",
      variableDescription: "",
      variableName: "",
      start: "",
      end: ""
    });
    const dialogVisible = ref<boolean>(false);

    // 表格数据
    const tableData = ref([
      {
        coilNumber: "M23132184C",
        coilGrade: "SPCC-1DW",
        inWidth: "920",
        inThickness: "2.8",
        outWidth: "920",
        outThickness: "0.6",
        planTime: "2024-01-01 08:00:00",
        ZS1: "950.23",
        ZS2: "718.24",
        ZS3: "665.81",
        ZS4: "610.8",
        ZS5: "410.99",
        ZHS1: "13.4",
        ZHS2: "18.94",
        ZHS3: "13.86",
        ZHS4: "10.25",
        ZHS5: "7.74"
      }
    ]);

    const rollingProcedureTable = ref([
      {
        ITEM: "工作辊直径",
        UNIT: "mm",
        S1: "460",
        S2: "460",
        S3: "460",
        S4: "460",
        S5: "460"
      }
    ]);
    const echartsListOptions = [
      {
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
          splitLine: { show: false },
        },
        yAxis: {
          name: '单位张力',
          nameTextStyle: {
            fontSize:'14px',
            color: 'black' // 设置 y 轴名称的颜色为红色
          },
          splitLine: { show: false },

        },
        legend: {
            data: ['实际值', '推荐值'],
            textStyle:{
                fontSize:'14px',
                color:'black'
            },

        },
        series: [
          {
            name:"实际值",
            type: "bar",
            data: [23, 24, 18, 25, 18],
            barGap: "20%",
            barCategoryGap: "40%"
          },
          {
            name:"推荐值",
            type: "bar",
            data: [12, 14, 9, 9, 11]
          }
        ]
      },
      {
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
          splitLine: { show: false },
        },
        yAxis: {
          name: '厚度',
          nameTextStyle: {
            fontSize:'14px',
            color: 'black' // 设置 y 轴名称的颜色为红色
          },
          splitLine: { show: false },
        },
        legend: {
            data: ['实际值', '推荐值'],
            textStyle:{
                fontSize:'14px',
                color:'black'
            },

        },
        series: [
          {
            name:"实际值",
            type: "bar",
            data: [23, 24, 18, 25, 18],
            barGap: "20%",
            barCategoryGap: "40%"
          },
          {
            name:"推荐值",
            type: "bar",
            data: [12, 14, 9, 9, 11]
          }
        ]
      }
    ];

    const simulationResultOutTable = ref([
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      },
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      },
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      },
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      },
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      },
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      },
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      },
      {
        ITEM: "速度",
        UNIT: "m/min",
        BEFORE: "/",
        STD1: "355",
        STD2: "515",
        STD3: "728",
        STD4: "975",
        STD5: "1273"
      }
    ]);

    const option = {
      xAxis: {
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        name: "轧制力/10kN",
        nameTextStyle: {
          fontSize: "8px",
          color: "#6d7882"
        },
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        }
      },
      series: [
        {
          type: "bar",
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };
    const option1 = {
      xAxis: {
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        name: "强力/10kN",
        nameTextStyle: {
          fontSize: "8px",
          color: "#6d7882"
        },
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        }
      },
      series: [
        {
          type: "bar",
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };
    const option2 = {
      xAxis: {
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        name: "速度[m/min]",
        nameTextStyle: {
          fontSize: "8px",
          color: "#6d7882"
        },
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        }
      },
      series: [
        {
          type: "bar",
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };
    const option3 = {
      xAxis: {
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        name: "功率/kW",
        nameTextStyle: {
          fontSize: "8px",
          color: "#6d7882"
        },
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          fontSize: 10 // 设置字体大小为14
        }
      },
      series: [
        {
          type: "bar",
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };

    const dataSourceType = ref("");

    const dataSourceTypeOptions = ref([
      { label: "PLC", value: "PLC" },
      { label: "传感器", value: "传感器" },
      { label: "AI算法", value: "AI算法" },
      { label: "称重传感器", value: "称重传感器" },
      { label: "电池管理系统", value: "电池管理系统" }
    ]);

    // 分页数据
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: tableData.value.length
    });

    // 窗口大小变化处理
    const handleResize = () => {
      nextTick(() => {
        // 这里可以添加表格自适应高度的逻辑
      });
    };

    const handleCheck = (row: any) => {
      dialogVisible.value = true;
    };

    // 获取表格数据
    const fetchTableData = async () => {
      try {
        // 这里添加获取数据的API调用
        // const res = await api.getTableData({ ...headerSearchForm, ...pagination });
        // tableData.value = res.data;
        // pagination.total = res.total;
      } catch (error) {
        ElMessage.error("获取数据失败");
      }
    };

    // 查询方法
    const handleSearch = () => {
      pagination.currentPage = 1;
      fetchTableData();
    };

    // 重置方法
    const handleReset = () => {
      (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach(
        key => {
          headerSearchForm[key] = "";
        }
      );
      handleSearch();
    };

    // 删除方法
    const handleDelete = (row: any) => {
      // 这里添加删除逻辑
      console.log("删除", row);
    };

    // 分页大小变化
    const handleSizeChange = (val: number) => {
      pagination.pageSize = val;
      fetchTableData();
    };

    // 页码变化
    const handleCurrentChange = (val: number) => {
      pagination.currentPage = val;
      fetchTableData();
    };

    // 生命周期钩子
    onMounted(() => {
      // fetchTableData();
      window.addEventListener("resize", handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener("resize", handleResize);
    });

    const form = reactive({
      name: "",
      region: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: ""
    });

    return {
      headerSearchForm,
      tableData,
      pagination,
      handleSearch,
      handleReset,
      handleCheck,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
      dataSourceTypeOptions,
      dataSourceType,
      dialogVisible,
      form,
      rollingProcedureTable,
      simulationResultOutTable,
      option,
      option1,
      option2,
      option3,
      echartsListOptions
    };
  }
});
</script>
<style scoped lang="less">
.msg-title {
  top: -4vh;
  left: 39.5vw;
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2vh;
  font-weight: bolder;
  width: 10vw;
}
:deep(.el-table .cell) {
  line-height: 14px;
}
::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 4px;
  padding-bottom: 4px;
}
</style>
